<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>添加服务信息</title> 
#@includeBaseCss()
<style type="text/css">
/*.input-group input{ vertical-align:middle; margin:0; padding:0}*/
/*.file-box{ position:relative;width:340px}*/
.txt{  border:1px solid #cdcdcd;}
/*.btn{ background-color:#FFF; border:1px solid #CDCDCD;}*/
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>

<body class="no-skin">
	<div class="main-container" id="main-container">
		<script type="text/javascript">
				// 检查 class=main-container这个div层是不是相对窗口固定。
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
		</script>

		<div class="page-content">
			<!-- 页面内容开始 -->
			<div class="widget-main">

				<form class="form-horizontal" id="validation-form" method="post">
						<input type="hidden" name="obj.id" id="id" value="" />
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="versionNo">产品标题:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input type="text" name="obj.name" id="name"
									class="col-xs-12 col-sm-6" value="#(item.name??)" />
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="versionNo">产品副标题:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input type="text" name="obj.tname" id="tname"
									class="col-xs-12 col-sm-6" value="#(item.tname??)" />
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="os">所属分类:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">

								<select name="obj.serverg_id" id="serverg_id" class="form-control form-control-select input-s-sm">
									#for(type: types)
										<option value="#(type.id)" >#(type.name)</option>
									#end
								</select>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="os">所属门店:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<select name="obj.storeid" id="storeid" class="form-control form-control-select ">
									#for(store: stores)
										<option value="#(store.id)" >#(store.title)</option>
									#end
								</select>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="os">类型:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<select name="obj.type" id="type" class="form-control form-control-select ">
					
										<option value="0" >服务</option>
										<option value="1" >商品</option>
								</select>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="os">地址选择:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<div class="radio ">
									<label>
										<input name="form-field-radio obj.addtype" id="addtype" type="radio" class="ace">
										<span class="lbl"> 服务地址</span>
									</label>
									<label>
										<input name="form-field-radio obj.addtype" id="addtype" type="radio" class="ace">
										<span class="lbl"> 电商地址</span>
									</label>
								</div>
							</div>
							
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
						for="os">服务类型:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<div class="radio ">
									  <label>
										<input name="form-field-radio obj.sertype" id="sertype" type="radio" value="#(item.sertype??)" class="ace">
										<span class="lbl"> 上门服务</span>
									</label>
									<label>
										<input name="form-field-radio obj.sertype" id="sertype" type="radio" value="#(item.sertype??)" class="ace">
										<span class="lbl"> 到店服务</span>
									</label>
								</div>
							</div>
							
						</div>
					</div>

 
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
								for="content">产品logo:</label>
							<div class="col-xs-12 col-sm-9">
                        

								<div class="input-group col-xs-12 col-sm-9 ">
										<input type='text' name='obj.icon' id='icon' value="#(item.icon??)" class="col-xs-12 col-sm-6" /> 
										<input type='button' class='btn btn-default' value='浏览'   style="margin-right: 0.1em;" />
										<input type="file" name="icon"  class="file" id="iconField" onchange="document.getElementById('icon').value=this.value" />
										<input type="submit" name="submit" id="uploadicon" class="btn btn-default"  value="上传" />
								</div>
								<div class="input-group " style="margin-top:.5em; margin-bottom: 0.8em;">
									<img src="#(ctx)/res/img/local/nopic.jpg" id="img-thumbnail-icon" width="150">
								</div>   
							</div>
					</div>


					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
								for="content">产品海报:</label>
							<div class="col-xs-12 col-sm-9">
                        

								<div class="input-group col-xs-12 col-sm-9 ">
										<input type='text' name='obj.logo' id='logo' value="#(item.logo??)" class="col-xs-12 col-sm-6" /> 
										<input type='button' class='btn btn-default' value='浏览'   style="margin-right: 0.1em;" />
										<input type="file" name="icon"  class="file" id="logoField" onchange="document.getElementById('logo').value=this.value" />
										<input type="submit" name="submit" id="uploadlogo" class="btn btn-default"  value="上传" />
								</div>
								<div class="input-group " style="margin-top:.5em; margin-bottom: 0.8em;">
									<img src="#(ctx)/res/img/local/nopic.jpg" id="img-thumbnail-logo" width="150">
								</div>   
							</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="content">添加规则:</label>

						<!-- <div class="col-xs-12 col-sm-9"> -->
							<div class="accretion_specifications_a_a col-sm-9 col-xs-12">
								<input type="text" name="obj.spec" id="spec" placeholder="请输入名称..." class="col-sm-6 col-xs-9">
								<span class="btn btn-default btn-sm" onclick="addsize()">+ 添加</span>
							</div>
							<div class="col-xs-12 col-sm-9">
								<ul class="accretion_specifications_a_b" style="display: none;">
									<li class="accretion_specifications_a_b_lione">
										<span>规格</span><span>价格</span>
									</li>
									<li><input type="text" name="fdd[a2]" placeholder="请输入规格描述..."><input type="text" name="tdd[a2]" placeholder="请输入价格..."><span class="shanchu">删除</span></li>
								</ul>
							</div>
						
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="content">产品介绍:</label>

						<div class="col-xs-12 col-sm-9">

							   <script id="editor" type="text/plain" style="width:100%;height:200px;"></script>
							   <input type="hidden" name="obj.content" id="content">
						</div>
				
					</div>


					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
						for="content">服务介绍:</label>

						<div class="col-xs-12 col-sm-9">

							<textarea rows="5" cols="50"  name="obj.summary" id="summary" class="" style="resize: none;"></textarea>

						</div>

					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
						for="content">价格:</label>

						<div class="col-xs-12 col-sm-9">
								<input type='text' onkeyup='upperCase(this)' name='obj.price' id='price' class="col-xs-12 col-sm-9" />
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
						for="content">单位:</label>

						<div class="col-xs-12 col-sm-9">
							<input type='text'  name='obj.unit' id='unit' class="col-xs-12 col-sm-9" />
						</div>
					</div>


					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="content">温馨提示:</label>

						<div class="col-xs-12 col-sm-9">

							   <script id="tipeditor" type="text/plain" style="width:100%;height:200px;">
							   	<!-- #(item) -->
							   </script>
				 				<input type="hidden" name="obj.hint" id="hint">
						</div>
				
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
						for="content">前台热门排序:</label>

						<div class="col-xs-12 col-sm-9">
							<input type='text'  name='obj.top' id='top' class="col-xs-12 col-sm-9" />
						</div>
					</div>

					<div class="clearfix form-actions" align="center">
						<div class="col-md-offset-3 col-md-9">
							<button id="submit-btn" class="btn btn-info" type="submit"
								data-last="Finish">
								<i class="ace-icon fa fa-check bigger-110"></i> 提交
							</button>

							&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="ace-icon fa fa-undo bigger-110"></i> 重置
							</button>
						</div>
					</div>

				</form>
			</div>
			<!-- /.widget-main -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-container -->
	

	#@includeBaseJs()
	<script src="/res/ace-1.3.3/assets/js/ace-extra.js"></script>
	<script src="/res/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		
			jQuery(function($) {
				var file  = "fileField";
				createupload('uploadlogo','logoField','logo','img-thumbnail-logo');
				createupload('uploadicon','iconField','icon','img-thumbnail-icon');
				          //logo上传
      
				 //处理编辑器的问题
				var ue = UE.getEditor('editor',{
					toolbars:[
					['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic','simpleupload',
					'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily', 
					'justifyleft', 'justifyright','justifycenter', 'justifyjustify', 
					'strikethrough','superscript', 'subscript', 'removeformat',
					'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
					'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist', 
					'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
					]
				});  
				var tip = UE.getEditor('tipeditor',{
					toolbars:[
					['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic','simpleupload',
					'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily', 
					'justifyleft', 'justifyright','justifycenter', 'justifyjustify', 
					'strikethrough','superscript', 'subscript', 'removeformat',
					'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
					'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist', 
					'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
					],
					autoHeight:true,
			        autoHeightEnabled: false,//是否自动长高
			        autoFloatEnabled: false,//浮动是离浏览器的高度
			        imageScaledEnable:true,//图片能否自动缩放
			        allowDivTransToP:false//是否容许div转换为p 标签
				});


				var $validation = true;
				
				$('#validation-form').validate({
					errorElement: 'div',//使用什么标签标记错误
					errorClass: 'help-block',//指定错误提示的css类名,可以自定义错误提示的样式
					focusInvalid: true,//提交表单后,未通过验证的表单会获得焦点
					//表单验证规则
					rules: {
						remark:{//id
							required: true//必填
						},
						status:{
							required: true,
							number:true
						} 
						
					},
					//自定义的提示信息
					messages: {
						remark:{
							required: "第一项不能为空",
						},
						status:{
							required: "自然不能为空",
							number:"自然必须为整数"
						} 
					},
					//可以给未通过验证的元素加效果,闪烁等
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
					//要验证的元素通过验证后的动作,
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error');
						$(e).remove();
					},
					//跟一个函数,可以自定义错误放到哪里
					errorPlacement: function (error, element) {
						if(element.is(':checkbox') || element.is(':radio')) {
							var controls = element.closest('div[class*="col-"]');
							if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
							else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
						}
						else if(element.is('.select2')) {
							error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
						}
						else if(element.is('.chosen-select')) {
							error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
						}
						else error.insertAfter(element.parent());
					},
					//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
					submitHandler: function (form) {
						//数据处理

						$('#content').val(UE.getEditor('editor').getContent());
						$('#hint').val(UE.getEditor('tipeditor').getContent());


						var $form = $("#validation-form");
						var $btn = $("#submit-btn");
						console.log($form);
						//验证是否提交中，还未处理完
						// if($btn.hasClass("disabled")) return;

						//判断用户的editor里面内容
						// if(!uptext()) return;
						// alert("submit");
						
						//准备要提交的数据
						var submitData =$form.serializeArray();
					 
						//禁用提交按钮避免重复提交
						// $btn.addClass("disabled");
						//开始提交
						$.post("/server/project/saveServerproject", submitData,function(data) {
							//放开提交按钮
							$btn.removeClass("disabled");
							//处理返回结果
							if(data.code==0){

	        					layer.msg("保存成功", {
	        					    icon: 1,
	        					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
	        					},function(){
	        						//关闭弹出层

	        						window.history.back();
	        					});
	        					
	        				}else{
	        					layer.msg(data.msg, {
	        					    icon: 2,
	        					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
	        					},function(){ 
	        					});
	        					
	        				}
						},"json");
						return false;
					},
					//验证不通过时执行
					invalidHandler: function (form) {
						layer.msg("信息填写有误，再检查一下", {
    					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
    					},function(){ });
					}
				});
			});
			
			//关闭弹出层
			function closeView(){
				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(index); //再执行关闭 
			}

			//添加规格
			function addsize(){

				$('.accretion_specifications_a_b').css('display','block');

			}

			function upperCase(obj){//用户只能输入正负数与小数
				if(isNaN(obj.value) && !/^-$/.test(obj.value)){
					obj.value="";
				}
				if(!/^[+-]?\d*\.{0,1}\d{0,1}$/.test(obj.value)){
					obj.value=obj.value.replace(/\.\d{2,}$/,obj.value.substr(obj.value.indexOf('.'),3));
				}
			}

			function uptext(){
				var ue = UE.getEditor('editor');

				if (!ue.hasContents()) {
						layer.msg("请输入产品介绍", {
    					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
    					},function(){ });
    				return false;
				}else{
					$('#content').val(ue.getContent());
					return true;
				}
			}
			function createupload(clickobj,obj,name,finish){

				var submit = document.getElementById(clickobj);

		            		console.log(submit);
				submit.onclick = function(){
					                    //效验上传图片类型
                      // =$('#fileField');
                      // alert("onclick");
                  		var fileField = document.getElementById(obj);
                     		console.log(fileField);
                      // if (fileField.value) {
                      //     alert("请上传图片");
                      //     return false;
                      // } else if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileField.value)){
                      //     alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                      //     fileField.value = "";
                      //     return false;
                      // }
                      //效验成功调用异步上传函数
                      ajaxFileUpload(obj,name,finish);
                      return true;
				}
			  // $("#uploadlogo").click(function () {
  
     //          })
			}

		
   
      /**
       * ajaxFileUpload    JQuery异步上传插件
       */
          function ajaxFileUpload(obj,name,finish) {
              $.ajaxFileUpload
              (
                  {
                      url: "#(ctx)/server/project/uploadimg", //用于文件上传的服务器端请求地址
                      type: 'post',
                      data: {"type":"logo"},
                      secureuri: false, //是否需要安全协议，一般设置为false
                      fileElementId: obj, //文件上传域的ID
                      dataType: 'json', //返回值类型 一般设置为json
                      success: function (data, status)  //服务器成功响应处理函数
                      {

                                  // console.log(data);
                 
                              	var srcvalue = data.data.filePath;
                              	  console.log(srcvalue);
                              	  document.getElementById(finish).src = srcvalue;
                              	  // $("#img-thumbnail").attr('src',srcvalue); 
                              	  // $("#textfield").val(srcvalue);
                              	  document.getElementById(name).value = srcvalue;


                 
                      },
                      error: function (data, status, e)//服务器响应失败处理函数
                      {
                          alert(e);
                      }
                  }
              )
              return false;
            }

			
		</script>
</body>
</html>